<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/style.css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3.4.0"></script>
</head>
<body>
    <div id="app">
        <!-- <div>{{message}}</div> -->
        <div v-text="message"></div>
        <div v-html="intro"></div>
        <hr />
        <input type="text" class="taskInput" v-model="newTask" placeholder="把计划写下来吗?" @keyup.enter="addTask"/>
        <button v-on:click="addTask">添加</button>
        <div class="priority">
            <div>
                <input type="radio" value="重要" v-model="priority">重要
                <input type="radio" value="一般" v-model="priority">一般
                <input type="radio" value="低" v-model="priority">低
            </div>
            <p>任务优先级: {{priority}}</p>
        </div>
        <div>任务列表</div>
        <template v-if="tasks.length > 0">
            <ul>
                <li v-for="(task, index) in tasks" :key="index">
                    <div class="task-text" v-if="!task.editing">{{ task.text }}</div>
                    <input v-else type="text" v-model="task.text" />
                    <div class="actions">
                        <span class="edit" @click="toggleEdit(task)">
                            {{ task.editing ? '保存' : '编辑' }}
                        </span>
                        <span class="delete" @click="deleteTask(index)">删除</span>
                    </div>
                </li>
            </ul>
        </template>
        <template v-else>
            <p>没有数据！</p>
        </template>
    </div>
    <script>
        const { createApp, ref } = Vue;
  
        const App = {
          setup() {
            const newTask = ref("");
            const tasks = ref([
              { text: "学习前端基础HTML5/CSS3/JavaScript", editing: false, priority: "一般" },
              { text: "学习Vue.JS的基础知识", editing: false, priority: "重要"  },
              { text: "学习前端构建工具", editing: false, priority: "一般"  },
              { text: "学习前端UI构建", editing: false, priority: "重要"  },
              { text: "学习前端状态管理", editing: false, priority: "一般"  },
              { text: "学习前端路由管理", editing: false, priority: "一般"  },
              { text: "学习前端网络管理", editing: false, priority: "低"  },
              { text: "综合案例实战", editing: false, priority: "一般"  },
            ]);
            const priority = ref("一般");
            
            const addTask = () => {
              if (newTask.value.trim() !== "") {
                tasks.value.push({ text: newTask.value, editing: false });
                newTask.value = "";
              }
            };
            const toggleEdit = (task) => {
              task.editing = !task.editing;
            };
  
            const deleteTask = (index) => {
              if (confirm("确定要删除这个任务吗？")) {
                tasks.value.splice(index, 1);
              }
            };
            
            return {
              message: "你的代办事项",
              intro: "<p style='color:yellow'>报告主人！你还有<a href='#'>1</a>个代办事项未完成，有 <a href='#'>5</a>个已经过期了，有时间的话，赶紧去做吧。</p>",
              newTask,
              tasks,
              priority,
              addTask,
              deleteTask,
              toggleEdit
            };
          },
        };
        const vm = createApp(App).mount("#app");
        console.log(vm);
      </script>
</body>
</html>